<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<style>
			.notice-row a {
				color: #0c8687;
				font-size: 14px;
				text-decoration: none;
			}

			.notice-row a:hover {
				color: #0c8687;
				font-size: 14px;
				text-decoration: none;
			}

			.fabu {
				color: #fff;
				background-color: #0c8687;
				border-color: #0c8687;
				width: 100px;
				height: 40px;
				line-height: 25px;
			}

			.pagination>.active>a,
			.pagination>.active>span,
			.pagination>.active>a:hover,
			.pagination>.active>span:hover,
			.pagination>.active>a:focus,
			.pagination>.active>span:focus {
				z-index: 3;
				color: #fff;
				cursor: default;
				background-color: #0c8687;
				border-color: #0c8687;
			}

			.pagination>li>a {
				color: rgb(187, 187, 187);
			}

			.pagination input {
				outline: none;
				border-radius: 4px;
				width: 50px;
				height: 36px;
				outline: none;
				border: 1px #DDDDDD solid;
				text-align: center;
			}

			#go-page,#go-page1 {
				border: 1px #0c8687 solid;
				color: #fff;
				background: #0c8687;
			}
			#find-list2,#tyaddress2,#find-search-button1,.page2{
				display: none;
			}

			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}
		</style>
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script src="../js/jquery-3.2.1.min.js"></script>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id='oneser'><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script type="text/javascript">
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function() {
						if (!confirm('是否确定注销该用户并退出登录？'))
							return;
						$.post('http://localhost:80/ct/remove', function(res) {
							if (res) {
								location.href = 'login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>
		<!--招领、寻宠 css-->
		<style>
			.notice {
				padding-right: 15px;
				padding-left: 15px;
				margin: 0 auto;
				width: 1170px;
			}

			.notice-row {
				margin-right: -15px;
				margin-left: -15px;
			}

			.col-md-9 {
				margin: 80px auto 0;
				width: 75%;
				float: none;
			}

			.pull-left {
				float: left !important;
				padding-left: 0;
				margin-bottom: 10px;
				list-style: none;
			}

			.nav-pills>li {
				float: left;
				position: relative;
				display: block;
			}

			.nav-pills>li.active>a,
			.nav-pills>li.active>a:hover,
			.nav-pills>li.active>a:focus,
			.nav-pills>li>a:hover {
				background-color: #fff;
				color: #0c8687;
				border-bottom: 3px solid #0c8687;
			}

			.btn.btn-danger {
				width: 100px;
				background: #0c8687;
				border: 1px solid #0c8687;
				border-radius: 5px;
				color: #fff;
				margin-top: 10px;
			}

			.find-cell-con {
				width: 33.33333333%;
				float: left;
				position: relative;
				min-height: 1px;
				padding-right: 15px;
				padding-left: 15px;
			}

			.w-box {
				width: 100%;
				max-width: 260px;
				margin: 10px auto 20px auto;
				background-color: #e1e1e1b5;
				padding: 10px;
			}

			.w-box .figure {
				position: relative;
			}

			.w-box .figure img {
				height: 200px;
				display: block;
				max-width: 100%;
			}

			.w-box h4 {
				height: 22px;
				line-height: 22px;
				overflow: hidden;
				font-size: 14px;
			}

			.w-box .text-muted {
				height: 20px;
				line-height: 20px;
				overflow: hidden;
				color: #c1c1c1;
				font-size: 14px;
			}
		</style>
		<div class="container notice">
			<div class="row notice-row">
				<div class="col-md-9">
					<div class="find-list-nav clearfix">
						<div class="row">
							<div class="col-md-6">
								<ul class="nav nav-pills pull-left">
									<li class="active"><a href="javascript:void(0)" class="selected" id="seek">寻宠启事</a></li>
									<li class=""><a href="javascript:void(0)" class="selected"
											style="color: rgb(27, 36, 47);" id="found">招领启事</a></li>
								</ul>
								<a class="btn fabu" href="noticePost.html" style="margin-left: 20px;color: #fff;"> <i
										class="fa fa-plus"></i> 发布</a>
							</div>
							<div class="col-md-6 col-xs-12 input-group find-search-group" style="margin-top: 10px;">
								<span class="input-group-addon hidden-xs">关键词</span>
								<input type="text" name="find_keywords" class="form-control pull-left" id="tyaddress1"
									placeholder="输入地区等关键词" value="" style="width: 300px;padding-left: 5px;">
									<input type="text" name="find_keywords" class="form-control pull-left" id="tyaddress2"
										placeholder="输入地区等关键词" value="" style="width: 300px;padding-left: 5px;">
								<span class="input-group-btn" style="right: 18px;">
									<button class="btn btn-default" id="find-search-button" type="submit"
										style="outline: none;"><i class="fa fa-search"></i><span
											class="hidden-xs">搜索</span></button>
											<button class="btn btn-default" id="find-search-button1" type="submit"
												style="outline: none;"><i class="fa fa-search"></i><span
													class="hidden-xs">搜索</span></button>
								</span>
							</div>
						</div>
					</div>
					<div class="row hidden-xs" id="find-list1">
						<div class="col-md-4 col-sm-6 col-xs-12 find-cell-con">
							<div class="w-box ">
								<div class="figure">
									<a href="noticeDetails.html">
										<img class="img-responsive"
											src="http://i1.bagong.cn/80/2a/0188b3dc9518093b0aae7ce265e0_260x200_1."
											alt="寻宠启事2023.8.6日晚在上海嘉...">
									</a>
								</div>
								<h4><a href="noticeDetails.html">寻宠启事2023.8.6日晚在上海嘉...</a></h4>
								<div class="text-muted">上海市 嘉定区</div>
							</div>
						</div>
					
					</div>
					<div class="row hidden-xs" id="find-list2">
						<div class="col-md-4 col-sm-6 col-xs-12 find-cell-con">
							<div class="w-box ">
								<div class="figure">
									<a href="noticeDetails.html">
										<img class="img-responsive"
											src="../images/6.jpg"
											alt="寻宠启事2023.8.6日晚在上海嘉...">
									</a>
								</div>
								<h4><a href="noticeDetails.html">寻宠启事2023.8.6日晚在上海嘉...</a></h4>
								<div class="text-muted">34546</div>
							</div>
						</div>
					</div>
					<div class="text-center hidden-xs page1">
						<ul class="pagination">
							<li class="active"><a href="javascript:void(0)" id="firstpage" title="首页">首页</a></li>
							<li><a href="javascript:void(0)" id="prevpage" title="上一页">上一页</a></li>
							<li><a href="javascript:void(0)" id="nextpage" title="下一页">下一页</a></li>
							<li><a href="javascript:void(0)" id="lastpage" title="最后一页">尾页</a></li>
							<li style="margin-left: 20px;">第<input type="text" id="pagenum" value="1" />页
								<input type="button" value="GO" id="go-page" style="" />
							</li>
						</ul>
					</div>
					<div class="text-center hidden-xs page2">
						<ul class="pagination">
							<li class="active"><a href="javascript:void(0)" id="firstpage1" title="首页">首页</a></li>
							<li><a href="javascript:void(0)" id="prevpage1" title="上一页">上一页</a></li>
							<li><a href="javascript:void(0)" id="nextpage1" title="下一页">下一页</a></li>
							<li><a href="javascript:void(0)" id="lastpage1" title="最后一页">尾页</a></li>
							<li style="margin-left: 20px;">第<input type="text" id="pagenum1" value="1" />页
								<input type="button" value="GO" id="go-page1" style="" />
							</li>
						</ul>
					</div>

				</div>

			</div>
		</div>


		<!--/header-->

		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>

		<!--/footer-->
		<!-- 分页样式 -->
		<script>
			$(function() {
				$(".pagination li").click(function() {
					$(this).children("a").css("color", "#fff");
					$(this).children("a").css("cursor", "default");
					$(this).children("a").css("background-color", "#0c8687");
					$(this).children("a").css("border-color", "#0c8687");
					$(this).siblings().children("a").css("color", "#bbb");
					$(this).siblings().children("a").css("cursor", "default");
					$(this).siblings().children("a").css("background-color", "#fff");
					$(this).siblings().children("a").css("border-color", "#ddd");
		
				})
				
			})
		</script>
	    <script type="text/javascript">
			$(function(){
				$(".selected").click(function() {
					$(this).css("color", "#0c8687");
					$(this).css("border-bottom", "3px solid #0c8687");
					$(this).parent().siblings().children().css("color", "#1b242f");
					$(this).parent().siblings().children().css("border-bottom", "none");
				})
				$("#seek").click(function(){
					$("#find-list1").css("display","block");
					$(".page1").css("display","block");
					$("#find-list2").css("display","none");
					$(".page2").css("display","none");
					$("#tyaddress1").css("display","table-cell");
					$("#tyaddress2").css("display","none");
					$("#find-search-button").css("display","inline-block");
					$("#find-search-button1").css("display","none");
				})
				$("#found").click(function(){
					$("#find-list1").css("display","none");
					$(".page1").css("display","none");
					$("#find-list2").css("display","block");
					$(".page2").css("display","block");
					$("#tyaddress1").css("display","none");
					$("#tyaddress2").css("display","table-cell");
					$("#find-search-button1").css("display","inline-block");
					$("#find-search-button").css("display","none");
				})
			})
		</script>
	    <script type="text/javascript">
			$(function(){
				let index1 =1;
				let index2 =1;
				let pages1 =1;
				let pages2 =1;
				$("#find-search-button").click(function(){
					index1=1;
					seek();
				})
				$("#firstpage").click(function(){
					index1=1;
					$("#pagenum").val(index1);
					seek();
				})
				$("#prevpage").click(function(){
					if(index1 == 1){
						alert("当前页已是最首页！");	
						index1=1;
					}else{
						index1 = index1 - 1;
					}		
					$("#pagenum").val(index1);
					seek();
				})
				$("#nextpage").click(function(){			
					if(index1 == pages1){
						alert("当前页为最后一页！");
						index1 =pages1;
					}else{
						index1 = index1 + 1;
					}
					$("#pagenum").val(index1);
					seek();
				})
				$("#lastpage").click(function(){
					index1 =pages1;
					$("#pagenum").val(index1);
					seek();
				})
				$("#go-page").click(function(){
				   let num =$("#pagenum").val(); 
				   index1 = num;
				   if(num > pages1){
					   alert("输入页码不能大于总页数！"); 
					   index1 = 1;
				   }
				   if(num <= 0){
				   		alert("输入页码不能低于0！"); 		
						index1 = 1;
				   }  
				   $("#pagenum").val(index1);
				   seek();
				})
				//寻宠启事
				seek();
				function seek(){
					 $.post('http://localhost:80/ct/seekall',{"index":index1,"address":$("#tyaddress1").val()},function(r){
						 $("#find-list1").children().remove();
						 $(r.records).each(function(i,e){
							let ds ="<div class='col-md-4 col-sm-6 col-xs-12 find-cell-con'>"+
							"<div class='w-box '>"+
								"<div class='figure'>"+
									"<a href='noticeDetails.html?seekid="+e.seekid+"'>"+
										"<img class='img-responsive' src='../images/"+e.seekfile+"' alt='"+e.seektitle+"'>"+
									"</a>"+
								"</div>"+
								"<h4><a href='noticeDetails.html'>"+e.seektitle+"</a></h4>"+
								"<div class='text-muted'>"+e.seekaddress+"</div>"+
							"</div>"+
						"</div>";
							 $("#find-list1").append(ds);
						 });
						 pages1 = r.pages;
					 },"json");
				}
				
				$("#find-search-button1").click(function(){
					index2=1;
					found();
				})
				$("#firstpage1").click(function(){
					index2=1;
					$("#pagenum1").val(index2);
					found();
				})
				$("#prevpage1").click(function(){
					if(index2 == 1){
						alert("当前页已是最首页！");			
						index2=1;
					}else{
						index2 = index2 - 1;
					}
					$("#pagenum1").val(index2);
					found();
				})
				$("#nextpage1").click(function(){		
					if(index2 == pages2){
						alert("当前页为最后一页！");
						index2 =pages2;
					}else{
						index2 = index2 + 1;
					}
					$("#pagenum1").val(index2);
					found();
				})
				$("#lastpage1").click(function(){
					index2 =pages2;
					$("#pagenum1").val(index2);
					found();
				})
				$("#go-page1").click(function(){
				   let num =$("#pagenum1").val();
				    index2 = num;
				   if(num > pages2){
					   alert("输入页码不能大于总页数！"); 
					   index2 = 1;
				   }
				   if(num <= 0){
				   		alert("输入页码不能低于0！");
						index2 = 1;
				   } 
				   $("#pagenum1").val(index2);
				   found();
				})
				//招领启事
				found();
				function found(){
					 $.post('http://localhost:80/ct/foundall',{"index":index2,"address":$("#tyaddress2").val()},function(r){
					 	$("#find-list2").children().remove();
					 	 $(r.records).each(function(i,e){
					 		let ds ="<div class='col-md-4 col-sm-6 col-xs-12 find-cell-con'>"+
					 		"<div class='w-box '>"+
					 			"<div class='figure'>"+
					 				"<a href='noticeDetails.html?fid="+e.fid+"'>"+
					 					"<img class='img-responsive' src='../images/"+e.foundfile+"' alt='"+e.foundtitle+"'>"+
					 				"</a>"+
					 			"</div>"+
					 			"<h4><a href='noticeDetails.html'>"+e.foundtitle+"</a></h4>"+
					 			"<div class='text-muted'>"+e.foundaddress+"</div>"+
					 		"</div>"+
					 	"</div>";
					 		 $("#find-list2").append(ds);
					 	 });	
						pages2 = r.pages;
					 },"json");
				}
				
			})
		</script>
	</body>
</html>